<template>
    <div class="container">
        <div id="map">
        </div>
        <!-- 小区信息抽屉 -->
        <el-drawer :visible.sync="showDrawer" direction="ttb">
            <el-card class="box-card">
                <div slot="header" class="clearcfix">
                    <span> {{ currentCommunity.communityName }} </span>
                </div>
                <div class="text item">地址: {{ currentCommunity.communityAddress }}</div>
                <div class="text item">距离: {{ currentCommunity.distance }}</div>
                <div class="text item">剩余车位: {{ currentCommunity.remainder }}
                    <el-button @click="listCarports" style="float: right; padding: 3px 0" type="text">查看车位</el-button>
                </div>
            </el-card>
        </el-drawer>
        <!-- 车位列表模态框 -->
        <el-dialog title=车位列表 :visible.sync="showDialog">
            <el-table :data="carports" @row-click="onRowClick">
                <el-table-column property="rentalCarportId" label="编号" width="150"></el-table-column>
                <el-table-column property="rentalCarportUnitPrice" label="费用（元 /小时）" width="200"></el-table-column>
                <el-table-column property="rentalCarportBeginTime" label="开始时间" width="180"></el-table-column>
                <el-table-column property="rentalCarportEndTime" label="结束时间" width="180"></el-table-column>
                <el-table-column label="操作" width="200">
                    <el-button type="text">查看详情</el-button>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import $ from "jquery"

export default {
    name: "Map",
    data() {
        return {
            // 地图核心对象
            map: {},
            // 小区列表
            Communities: [],
            // 标点信息窗口
            infoWindow: null,
            // 抽屉可见
            showDrawer: false,
            // 当前小区
            currentCommunity: {},
            // 车位列表
            carports: [],
            // 显示预约车位模态框
            showDialog: false,
            orderFrom: {}
        }
    },
    mounted() {
        // 加载地图
        this.initMap();
    },
    methods: {
        // 初始化地图
        initMap() {
            // 创建地图核心对象
            this.map = new AMap.Map("map", {
                // 开启定位中心点
                resizeEnable: true,
                // 缩放级别
                zoom: 16,
                // // 中心点
                // center: [106.52553, 29.58567],
                // 视图模式
                viewMode: "3D"
            });
            // 获取当前位置
            this.getCurrentLocation();
        },
        // 地图标点点击事件
        onMarkerClick(e) {
            // 赋值
            this.currentCommunity = e.target.communityInfo;
            // 打开抽屉
            this.showDrawer = true;
        },
        // 添加标点
        addMarker(longitude, latitude, content) {
            // 添加标点
            let marker = new AMap.Marker({
                // 标点位置
                position: [longitude, latitude]
            });
            // 添加到地图
            this.map.add(marker);
            // 标点绑定click事件
            marker.on('click', this.onMarkerClick);
            if (content != null) {
                marker.communityInfo = content;
            } else {
                marker.setIcon(new AMap.Icon({
                    image: "/icon/cur-location.png",
                    imageSize: new AMap.Size(30, 30)
                }));
            }
        },
        // 获取当前位置
        getCurrentLocation() {
            let that = this;
            AMap.plugin("AMap.Geolocation", () => {
                let geolocation = new AMap.Geolocation({
                    // 使用高精度定位
                    enableHighAccuracy: true,
                    // 设置定位超时时间
                    timeout: 100000,
                    // 定位按钮的停靠位置偏移量
                    buttonOffset: new AMap.Pixel(10, 20),
                    // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    zoomToAccuracy: true,
                    // 定位按钮的排放位置,RB表示右下
                    buttonPosition: 'RB'
                });
                // 获取当前位置
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);
                AMap.event.addListener(geolocation, 'error', onError);

                // 定位成功回调
                function onComplete(data) {
                    console.log(data);
                    that.map.setCenter([data.position.lng, data.position.lat]);
                    // 添加标点
                    that.addMarker(data.position.lng, data.position.lat);
                    that.listCommunities(data.position.lng, data.position.lat);
                }
                // 定位失败回调
                function onError(errorMsg) {
                    console.log(errorMsg);
                }
            })
        },
        // 获取附近入驻小区
        listCommunities(longitude, latitude) {
            let that = this;
            $.ajax({
                url: IP_ADDR + "community/listCommunities",
                data: {
                    longitude: longitude,
                    latitude: latitude,
                    distance: 1000000
                },
                success: r => {
                    // 添加标点
                    let $res = $(r.res);
                    // 添加查询出的所有标点
                    $res.each((i, e) => {
                        that.addMarker(e.longitude, e.latitude, e);
                    });
                }
            });
        },
        // 获取小区车位列表
        listCarports() {
            let that = this;
            // 关闭抽屉
            this.showDrawer = false;
            $.ajax({
                url: IP_ADDR + "carport/listCarports",
                data: {
                    "communityId": that.currentCommunity.communityId
                },
                success: r => {
                    that.carports = r.res;
                    that.showDialog = true;
                }
            });
        },
        // 车位列表单元格点击事件
        onRowClick(row) {
            // 跳转网页，传递参数
            this.$router.push("/carportInfo/" + row.rentalCarportId);
        }
    }
}
</script>

<style scoped>
    #map {
        width: 100%;
        height: 660px;
    }
    .el-card {
        width: 35%;
        margin-left: 50px;
        margin-top: -35px;
    }
</style>
